<template>
  <div class="content">
    <div class="next-form-item">
      <div class="next-form-item-control">
        <div class="nc-container">
          <div class="nc_wrapper">
            <div class="nc_scale">
              <div class="nc_bg" style="width: 0px;"></div>
              <span id="btn_slide" class="nc_iconfont btn_slide" style="left: 0px;"></span>
              <div class="scale_text slidetounlock">
                <span class="nc-lang-cnt">请按住滑块，拖动到最右边</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SliderValidation',
  props: ['sliderValidationSuccess'],
  methods: {},
  watch: {
    sliderValidationSuccess(value) {
      if (!value) {
        this.slide && (this.slide.style.left = 0)
        this.slideBg.className = this.slideBgClassName + ' left-reset'
        this.slide.className = this.slideClassName + ' left-reset'
        this.textSpan.innerHTML = '请按住滑块，拖动到最右边'
        this.slideBg.style.width = 0
      }
    }
  },
  mounted() {
    const slide = document.querySelector('.btn_slide')
    this.slide = slide
    const slideParent = document.querySelector('.nc_scale')
    const slideBg = document.querySelector('.nc_bg')
    this.slideBg = slideBg
    const textSpan = document.querySelector('.nc-lang-cnt')
    this.textSpan = textSpan
    const slideClassName = slide.className
    this.slideClassName = slideClassName
    const slideBgClassName = slideBg.className
    this.slideBgClassName = slideBgClassName

    let startX, nowX, mousemoveX, startLeft
    this.$emit('update:sliderValidationSuccess', false)
    let slideWidth = slide.offsetWidth
    let slideParentWidth = slideParent.offsetWidth
    let endLeft = slideParentWidth - slideWidth

    slide.onmousedown = (e) => {
      if (this.sliderValidationSuccess) return
      startX = e.clientX
      startLeft = slide.offsetLeft
      slide.className = slideClassName
      slideBg.className = slideBgClassName
      document.documentElement.onmousemove = (evnent) => {
        nowX = evnent.clientX
        mousemoveX = startLeft + nowX - startX
        if (mousemoveX < 0) mousemoveX = 0
        if (mousemoveX > endLeft) mousemoveX = endLeft
        slide.style.left = slideBg.style.width = mousemoveX + 'px'
        return false
      }
    }
    // slide.ontouchstart = (e) => {
    //   if (this.sliderValidationSuccess) return
    //   startX = e.clientX
    //   startLeft = slide.offsetLeft
    //   slide.className = slideClassName
    //   slideBg.className = slideBgClassName
    //   document.addEventListener('touchmove', (evnent) => {
    //     nowX = evnent.clientX
    //     alert(startLeft)
    //     alert(nowX)
    //     alert(startX)
    //     mousemoveX = startLeft + nowX - startX
    //     if (mousemoveX < 0) mousemoveX = 0
    //     if (mousemoveX > endLeft) mousemoveX = endLeft
    //     slide.style.left = slideBg.style.width = mousemoveX + 'px'
    //     alert(mousemoveX)
    //     return false
    //   }, false)
    // }

    document.documentElement.onmouseup = (e) => {
      if (slide.offsetLeft == endLeft) {
        textSpan.innerHTML = '验证成功'
        slideBg.className = slideBgClassName + ' success'
        this.$emit('update:sliderValidationSuccess', true)
      } else {
        slide.className = slideClassName + ' left-reset'
        slideBg.className = slideBgClassName + ' left-reset'
        slide.style.left = slideBg.style.width = 0
      }
      document.documentElement.onmousemove = null
    }
    // document.documentElement.ontouchend = (e) => {
    //   if (slide.offsetLeft == endLeft) {
    //     textSpan.innerHTML = '验证成功'
    //     slideBg.className = slideBgClassName + ' success'
    //     this.$emit('update:sliderValidationSuccess', true)
    //   } else {
    //     slide.className = slideClassName + ' left-reset'
    //     slideBg.className = slideBgClassName + ' left-reset'
    //     slide.style.left = slideBg.style.width = 0
    //   }
    //   document.documentElement.onmousemove = null
    // }
  }
}
</script>

<style scoped lang="scss">
  * {
    box-sizing: border-box;
  }

  .content {
    /*margin: auto;*/
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
  }

  .next-form-item {
    width: 100%;
    height: 40px;
    margin-bottom: 0;
  }

  .next-form-item-control {
    position: relative;
    width: 100%;
    height: 40px;
  }

  .nc-container {
    font-size: 12px;
    -ms-touch-action: none;
    touch-action: none;
  }

  .nc-container .nc_wrapper {
    width: 100%;
  }

  .nc-container .nc_scale {
    width: auto;
    background: #e8e8e8;
    position: relative;
    margin: 0;
    padding: 0;
    height: 40px;
  }

  .nc-container .nc_scale .nc_bg {
    position: absolute;
    height: 100%;
    left: 0;
  }

  .nc-container .nc_scale .nc_bg {
    background: #409EFF;
  }

  .nc-container .nc_scale .nc_bg.success {
    background: #67c23a;
  }

  .nc-container .nc_scale span {
    text-align: center;
    position: absolute;
    cursor: move;
    background: #fff;
    z-index: 2;
    height: 40px;
    line-height: 40px;
    width: 50px;
  }

  .nc-container .scale_text.slidetounlock span.nc-lang-cnt {
    color: #4d4d4d;
    /*background: -webkit-gradient(linear, left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, #fff), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d));*/
    -webkit-background-clip: text;
    /*-webkit-text-fill-color: transparent;*/
    animation: slidetounlock 3s infinite;
    -webkit-animation: slidetounlock 3s infinite;
    -moz-animation: slidetounlock 3s infinite;
    -o-animation: slidetounlock 3s infinite;
    -webkit-text-size-adjust: none;
  }

  @keyframes slidetounlock {
    0% {
      background-position: -200px 0
    }
    100% {
      background-position: 200px 0
    }
  }

  @-webkit-keyframes slidetounlock {
    0% {
      background-position: -200px 0
    }
    100% {
      background-position: 200px 0
    }
  }

  @-moz-keyframes slidetounlock {
    0% {
      background-position: -200px 0
    }
    100% {
      background-position: 200px 0
    }
  }

  @-o-keyframes slidetounlock {
    0% {
      background-position: -200px 0
    }
    100% {
      background-position: 200px 0
    }
  }

  .nc-container .nc_scale .btn_slide {
    color: #737383;
    background-image: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .nc-container .nc_scale .nc_iconfont {
    border: 1px solid #d7d8d9;
    box-shadow: 2px 0 6px 0 rgba(0, 0, 0, .1);
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
  }

  .nc-container .nc_scale .nc_iconfont::after,
  .nc-container .nc_scale .nc_iconfont::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-top: 1px solid #aaa;
    border-right: 1px solid #aaa;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }

  .nc-container .nc_scale .nc_iconfont::after {
    left: 15px;
  }

  .nc-container .nc_scale .nc_iconfont::before {
    left: 20px;
  }

  .nc-container .nc_scale .scale_text {
    text-align: center;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    background: transparent;
    color: #9c9c9c;
    line-height: 40px;
    font-size: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .nc-container .nc_scale span.nc-lang-cnt {
    float: none;
    height: auto;
    border: none;
    position: static;
    cursor: inherit;
    background: none;
    z-index: 0;
    font-size: 12px;
    color: #fff;
    display: inline-block;
    width: 100%;
  }

  .left-reset {
    transition: all 500ms;
  }
</style>
